<template>
  <div class="right-table mediumtablestyle">
    <el-table
      :data="tableData"
      :row-class-name="tableRowClassName"
      style="width: 100%"
      border
      height="100%"
    >
      <el-table-column prop="interval" label="间隔" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="name" label="名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="realTime" :show-overflow-tooltip="true" label="实时数据"></el-table-column>
      <el-table-column prop="Monitoring" :show-overflow-tooltip="true" label="监测类型"></el-table-column>
      <el-table-column prop="time" :show-overflow-tooltip="true" width="120" label="监测时间"></el-table-column>
      <el-table-column prop="state" :show-overflow-tooltip="true" label="状态">
        <template slot-scope="scope">
          <div :class="scope.row.state | collectionValueFilter">{{ scope.row.state }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="Historical" :show-overflow-tooltip="true" label="历史曲线">
        <template slot-scope="scope">
          <span class="iconClick" @click="iconClick(scope.row)"></span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增联动配置" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <PopUp />
      <iframe class="iframe" frameborder=0></iframe>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
import PopUp from "../../../components/PopUp.vue";
@Component({
  components: { PopUp },
})
export default class rightTable extends Vue {
  // 弹框状态
  public dialogVisible: boolean = false;

  //表格数据
  public tableData: Array<any> = [
    {
      interval: "#1主变",
      name: "#1主变氢气",
      realTime: "17.5u/1",
      Monitoring: "氢气",
      time: "2020/08/30 17:50",
      state: "正常",
      Historical: "",
    },
    {
      interval: "#1主变",
      name: "#1主变氢气",
      realTime: "17.5u/1",
      Monitoring: "氢气",
      time: "2020/08/30 17:50",
      state: "正常",
      Historical: "1",
    },
    {
      interval: "#1主变",
      name: "#1主变氢气",
      realTime: "17.5u/1",
      Monitoring: "氢气",
      time: "2020/08/30 17:50",
      state: "正常",
      Historical: "",
    },
    {
      interval: "#1主变",
      name: "#1主变氢气",
      realTime: "17.5u/1",
      Monitoring: "氢气",
      time: "2020/08/30 17:50",
      state: "正常",
      Historical: "1",
    },
  ];
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  //曲线icon事件
  iconClick(vlue: Object) {
    // console.log(vlue);
    this.dialogVisible = true;
  }
  handleClose() {
    this.dialogVisible = false;
  }
}
</script>

<style lang="scss" scoped>
.right-table {
  width: 100%;
  height: 100%;
  padding: 0 0.2rem 0.2rem;
  .iconClick {
    display: inline-block;
    width: 0.42rem;
    height: 0.2rem;
    background: url(../../../../../assets/img/OnlineMonitor/cli_qx.png)
      no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
    cursor: pointer;
  }
  .iconClick:hover {
    background: url(../../../../../assets/img/OnlineMonitor/nor_qx.png)
      no-repeat;
    background-size: 100% 100%;
  }
  .normal {
    color: rgba(3, 204, 150, 1);
  }
  .abnormal {
    color: rgba(246, 91, 55, 1);
  }
  .iframe {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 1;
    opacity: 0.1;
    background: none;
    pointer-events: none;
  }
}
</style>
<style lang="scss">
//弹窗
.right-table {
  .el-dialog {
    width: 11rem !important;
    height: 6.32rem;
  }
  .el-dialog__body {
    height: calc(100% - 44px);
  }
}
</style>
